<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<!-- InstanceBegin template="/Templates/tool.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- InstanceBeginEditable name="doctitle" -->
    <link rel="stylesheet" type="text/css" href="qrx/qreditor.css">
    <!--<link rel="stylesheet" type="text/css" href="qrx/qrtable.css">-->
    <link rel="stylesheet" type="text/css" href="qrx/qrpulldown.css">
    <!-- InstanceEndEditable -->
    <style type="text/css">
        <!--
        body, td, th {
            font-family: Verdana, 宋体;
            font-size: 14px;
        }

        body {
            margin-left: 0px;
            margin-top: 0px;
            width: 100%;
        }

        a {
            color: #0000FF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
            color: #990000;
        }

        .draggable-window {
            position: absolute;
            background-color: rgba(173, 216, 230, 0.9);
            border: 1px solid #ff311b;
            top:500px;
            left:90px;
            width: 270px;
            height: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            cursor: move;
        }
        .draggable-header {
            background-color: #f1f1f1;
            padding: 10px;
            cursor: move;
            user-select: none; /* Prevent text selection while dragging */
        }
        /* 分组样式 */
        .attribute-group {
            margin-bottom: 15px;
            border: 1px solid #e1e1e1;
            border-radius: 5px;
            overflow: hidden;
        }

        .group-header {
            padding: 10px 15px;
            background-color: #f5f7fa;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: bold;
            border-bottom: 1px solid #e1e1e1;
        }

        .group-header:hover {
            background-color: #ebeff5;
        }

        .group-name {
            flex: 1;
        }

        .group-toggle {
            width: 20px;
            text-align: center;
            font-size: 12px;
        }

        .item-count {
            font-size: 12px;
            color: #666;
            margin-left: 10px;
            font-weight: normal;
        }

        .group-content {
            padding: 10px;
            background-color: #fff;
        }
        .attribute-key{
            background-color: lightblue;
            border-width: thin;
            border-color: #008275;
        }
        -->
    </style>
    <style type="text/css">
        .switch-control {
            position: relative;
            display: inline-block;
            width: 46px;
            height: 20px;
        }
        .switch-control input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #4CAF50;
        }
        input:checked + .slider:before {
            transform: translateX(22px);
        }
    </style>

    <!-- InstanceBeginEditable name="head" -->



    <!-- InstanceEndEditable -->
    <style>
        .fixed-header {
            position: sticky;
            top: 0;
            background-color: #6fffec; /* 确保背景色覆盖其他内容 */
            z-index: 1; /* 确保在其他内容之上 */
        }
    </style>
    <style type="text/css">
        <!--
        .QrCSSDesignerPad {
            margin-top: 5px;
            width: 100%;
        }

        .QrCSSDesignerPadLeft {
            width: 40%;
        }

        -->
    </style>
    <script>
        //定义一个显示中文映射数组，动态显示时，从数组中查找对应的中文进行显示
        // 定义代码和中文描述的映射数组
        const codeDescriptionMap = [
            /* 标题相关 */
            { code: 'title-show_radio', description: '标题是否显示' },
            { code: 'title-text_text', description: '标题名称' },
            { code: 'title-textstyle-color_colorpicker', description: '标题颜色' },
            { code: 'title-textstyle-fontsize_number', description: '标题字号' },
            { code: 'title-textstyle-fontweight_select', description: '标题字体粗细' },
            { code: 'title-textStyle-fontStyle_select', description: '标题字体样式' },
            { code: 'title-subtext_text', description: '标题副文本' },
            { code: 'title-subtextstyle-color_colorpicker', description: '标题副文本颜色' },
            { code: 'title-subtextstyle-fontsize_number', description: '标题副文本字号' },
            { code: 'title-subtextstyle-fontweight_select', description: '标题副文本字体粗细' },
            { code: 'title-subtextStyle-fontStyle_select', description: '标题副文本字体样式' },
            { code: 'title-left_slider', description: '标题左右边距' },
            { code: 'title-top_slider', description: '标题上下边距' },
            { code: 'title-itemgap_number', description: '主副标题间距' },
            { code: 'title-textalign_select', description: '主副标题对齐' },
            { code: 'title-textstyle-fontstyle_select', description: '标题风格' },
            { code: 'title-subtextstyle-fontstyle_select', description: '副标题风格' },

            /* 网格相关 */
            { code: 'grid-left_slider', description: '网格左边距' },
            { code: 'grid-right_slider', description: '网格右边距' },
            { code: 'grid-bottom_slider', description: '网格下边距' },
            { code: 'grid-top_slider', description: '网格上边距' },
            { code: 'grid-containlabel_radio', description: '刻度标签' },
            /*提示框相关*/
            { code: 'tooltip-show_radio', description: '提示框是否显示' },
            { code: 'tooltip-trigger_select', description: '触发方式' },
            { code: 'tooltip-axispointer-snap_radio', description: '自动吸附' },
            { code: 'tooltip-axispointer-type_select', description: '指示器类型' },
            { code: 'tooltip-axispointer-label-show_radio', description: '指示器标签是否显示' },
            { code: 'tooltip-axispointer-label-color_colorpicker', description: '指示器标签颜色' },
            { code: 'tooltip-axispointer-label-fontsize_number', description: '指示器标签字号' },
            { code: 'tooltip-axispointer-label-fontweight_select', description: '指示器标签字体粗细' },
            { code: 'tooltip-axispointer-label-fontstyle_select', description: '指示器标签风格' },
            { code: 'tooltip-axispointer-linestyle-color_colorpicker', description: '指示器颜色' },
            { code: 'tooltip-axispointer-linestyle-width_number', description: '指示器宽度' },
            { code: 'tooltip-formatter_text', description: '提示框内容' },
            { code: 'tooltip-backgroundcolor_colorpicker', description: '提示框背景色' },
            { code: 'tooltip-bordercolor_colorpicker', description: '提示框边框色' },
            { code: 'tooltip-borderwidth_number', description: '提示框边框宽度' },
            { code: 'tooltip-padding_number', description: '提示框内边距' },

            /* X轴相关 */
            { code: 'xaxis-show_radio', description: 'X轴是否显示' },
            { code: 'xaxis-axislabel-show_radio', description: 'X轴标签是否显示' },
            { code: 'xaxis-max_number', description: 'X轴最大值' },
            { code: 'xaxis-min_number', description: 'X轴最小值' },
            { code: 'xaxis-position_select', description: 'X轴标签位置' },
            { code: 'xaxis-offset_number', description: 'X轴标签偏移' },
            { code: 'xaxis-nametextstyle-color_colorpicker', description: 'X轴名称颜色' },
            { code: 'xaxis-nametextstyle-fontsize_number', description: 'X轴标签字号' },
            { code: 'xaxis-nametextstyle-fontweight_select', description: 'X轴标签字体粗细' },
            { code: 'xaxis-nametextstyle-fontstyle_select', description: 'X轴字体风格' },
            { code: 'xaxis-axislabel-color_colorpicker', description: '刻度标签文字的颜色' },
            { code: 'xaxis-inverse_radio', description: 'X轴反转' },
            { code: 'xaxis-name_text', description: 'X轴名称' },
            { code: 'xaxis-axislabel-rotate_number', description: 'X轴标签旋转' },
            { code: 'xaxis-vertical-show_radio', description: 'X轴竖直显示' },
            { code: 'xaxis-splitline-show_radio', description: '是否显示分割线' },
            { code: 'xaxis-splitline-linestyle-color_colorpicker', description: '分割线颜色' },
            { code: 'xaxis-splitline-linestyle-width_number', description: '分割线宽度' },
            { code: 'xaxis-axislabel-interval_number', description: '标签间距' },
            { code: 'xaxis-axisline-show_radio', description: 'X轴线显示' },
            { code: 'xaxis-axisline-linestyle-color_colorpicker', description: '轴线颜色' },
            { code: 'xaxis-axisline-linestyle-width_number', description: '轴线宽度' },
            { code: 'xaxis-type_text', description: 'X轴类型' },
            { code: 'xaxis-data_array', description: 'X轴数据' },
            { code: 'xaxis-axislabel-formatter_text', description: '数据格式' },

            /* Y轴相关 */
            { code: 'yaxis-show_radio', description: 'Y轴是否显示' },
            { code: 'yaxis-axislabel-show_radio', description: 'Y轴标签是否显示' },
            { code: 'yaxis-max_number', description: 'Y轴最大值' },
            { code: 'yaxis-min_number', description: 'Y轴最小值' },
            { code: 'yaxis-position_select', description: 'Y轴标签位置' },
            { code: 'yaxis-offset_number', description: 'Y轴标签偏移' },
            { code: 'yaxis-nametextstyle-color_colorpicker', description: 'Y轴名称颜色' },
            { code: 'yaxis-nametextstyle-fontsize_number', description: 'Y轴名称字号' },
            { code: 'yaxis-nametextstyle-fontweight_select', description: 'Y轴标签字体粗细' },
            { code: 'yaxis-nametextstyle-fontstyle', description: 'Y轴字体风格' },
            { code: 'yaxis-axislabel-color_colorpicker', description: 'Y轴标签颜色' },
            { code: 'yaxis-axislabel-rotate_number', description: 'Y轴标签旋转' },
            { code: 'yaxis-nametextstyle-fontstyle_select', description: 'Y轴名称样式' },
            { code: 'yaxis-inverse_radio', description: '坐标反转' },
            { code: 'yaxis-axisline-show_radio', description: '轴线显示' },
            { code: 'yaxis-axisline-linestyle-width_number', description: '轴线宽度' },
            { code: 'yaxis-scale_radio', description: '脱离零值' },
            { code: 'yaxis-name_text', description: 'Y轴名称' },
            { code: 'yaxis-type_text', description: 'Y轴类型' },
            { code: 'yaxis-data_array', description: 'Y轴数据' },
            { code: 'yaxis-splitline-show_radio', description: '是否显示分割线' },
            { code: 'yaxis-splitline-linestyle-color_colorpicker', description: '分割线颜色' },
            { code: 'yaxis-splitline-linestyle-width_number', description: '分割线宽度' },
            { code: 'yaxis-axisline-linestyle-color_colorpicker', description: '数值颜色' },
            { code: 'yaxis-vertical-show_radio', description: '数值颜色' },
            { code: 'yaxis-axislabel-formatter_text', description: '数值格式' },

            /* 图例相关 */
            { code: 'legend-show_radio', description: '图例是否显示' },
            { code: 'legend-textstyle-color_colorpicker', description: '图例文字颜色' },
            { code: 'legend-textstyle-fontsize_number', description: '图例文字字号' },
            { code: 'legend-textstyle-fontweight_select', description: '图例文字字体粗细' },
            { code: 'legend-textstyle-fontstyle_select', description: '图例文字字体风格' },
            { code: 'legend-itemstyle-color_colorpicker', description: '图例图形颜色' },
            { code: 'legend-itemheight_number', description: '图例图形高度' },
            { code: 'legend-itemwidth_number', description: '图例图形宽度' },
            { code: 'legend-bottom_number', description: '图例距底部偏移' },
            { code: 'legend-top_number', description: '图例距顶部偏移' },
            { code: 'legend-right_number', description: '图例距右侧偏移' },
            { code: 'legend-left_number', description: '图例距左侧偏移' },
            { code: 'legend-itemgap_number', description: '图例内间距' },
            { code: 'legend-orient_select', description: '图例排序方向' },
            { code: 'legend-selectmode_select', description: '图例模式' },

            /* 系列（数据）相关 */
            { code: 'series-barmaxwidth_slider', description: '柱状图最大宽度' },
            { code: 'series-itemstyle-borderradius_number', description: '柱条圆角' },
            { code: 'series-bargap_text', description: '柱间距离' },
            { code: 'series-barminheight_slider', description: '柱最小高度' },
            { code: 'series-showbackground_radio', description: '是否显示柱状图背景' },
            { code: 'series-backgroundstyle-color_colorpicker', description: '柱状图背景颜色' },
            { code: 'series-backgroundstyle-bordercolor_colorpicker', description: '柱状图背景描边颜色' },
            { code: 'series-backgroundstyle-borderwidth_number', description: '柱状图背景描边宽度' },
            { code: 'series-backgroundstyle-bordertype_select', description: '柱状图背景描边类型' },
            { code: 'series-backgroundstyle-opacity_slider', description: '柱状图背景透明度' },
            { code: 'series-labelline-linestyle-color_colorpicker', description: '标签引导线颜色' },
            { code: 'series-labelline-linestyle-width_number', description: '标签引导线宽度' },
            { code: 'series-label-show_radio', description: '是否显示标签' },
            { code: 'series-label-position_select', description: '数值位置' },
            { code: 'series-label-bordercolor_colorpicker', description: '标签描边颜色' },
            { code: 'series-itemstyle-color_array', description: '柱条颜色' },
            { code: 'series-itemstyle-bordercolor_colorpicker', description: '柱条描边颜色' },
            { code: 'series-itemstyle-borderradius_slider', description: '柱条圆角' },
            { code: 'series-barminwidth_slider', description: '柱条最小宽度' },
            { code: 'series-label-color_colorpicker', description: '字体颜色' },
            { code: 'series-label-fontsize_number', description: '标签的字号' },
            { code: 'series-label-fontweight_select', description: '标签的字体粗细' },
            { code: 'series-emphasis-itemstyle-shadowblur_number', description: '阴影的模糊度' },
            /*基础*/
            { code: 'base-echart-timer_number', description: '定时器（秒）' },
            { code: 'base-echart-timer-script_text', description: '定时执行脚本' },
            { code: 'base-animation_radio', description: '是否开启动画' },
            { code: 'base-animationduration_number', description: '动画时长' },
            { code: 'data-old-value', description: '变动历史' },
            { code: 'base-background_colorpicker', description: '背景色' },


            /*其他相关*/
            { code: 'series-emphasis-itemstyle-shadowcolor_colorpicker', description: '阴影的颜色' },
            { code: 'timer', description: '定时器（秒）' },
            { code: 'echart-timer', description: '定时器（秒）' },
            { code: 'init-script', description: '初始函数' },
            { code: 'echart-script', description: '脚本函数' },
            { code: 'timer-script', description: '定时执行函数' },
            { code: 'echart-init-script', description: '初始化脚本函数' },
            { code: 'echart-timer-script', description: '定时执行函数' },
            { code: 'base-data-url_text', description: '数据或服务链接' },
            { code: 'base-echart-init-script_text', description: 'ECharts初始化脚本' },
            { code: 'scroll-speed', description: '滚动速度' },
            { code: 'bg-color', description: '背景颜色' },
            { code: 'head-font-color', description: '表头字体颜色' },
            { code: 'head-font-size', description: '表头字体大小' },
            { code: 'head-bg-color', description: '表头背景颜色' },
            { code: 'body-font-color', description: '表体字体颜色' },
            { code: 'body-font-size', description: '表体字体大小' },
            { code: 'row-odd-color', description: '表体奇数行颜色' },
            { code: 'row-even-color', description: '表体偶数行颜色' },
            /*饼图设计*/
            { code: 'pie-radius_slider', description: '饼图的半径' },
            { code: 'pie-center_array', description: '中心坐标' },
            { code: 'pie-label-show_radio', description: '显示标签' },
            { code: 'pie-label-position_select', description: '标签的位置' },
            { code: 'pie-label-formatter_text', description: '标签格式器' },
            { code: 'pie-labelline-show_radio', description: '视觉引导线' },
            { code: 'pie-labelline-length_number', description: '一段线长度' },
            { code: 'pie-labelline-length2_number', description: '二段线长度' },
            { code: 'pie-inner_number', description: '内半径' },
            { code: 'pie-outer_number', description: '内半径' },
            { code: 'pie-clockwise_radio', description: '顺时针' },
            { code: 'pie-startangle_number', description: '起始角度' },
            { code: 'pie-minangle_number', description: '最小角度' },
            { code: 'pie-minshowlabelangle_number', description: '扇区最小展示' },
            { code: 'pie-itemstyle-borderradius_text', description: '圆角' },
            { code: 'pie-rosetype_select', description: '南丁格尔显示' },
            { code: 'pie-selectedmode_select', description: '模式' },
            { code: 'pie-selectedoffset_number', description: '偏移量' },
            { code: 'pie-padangle_number', description: '扇区间隔' },
            /*折线图设置*/
            { code: 'line-areastyle-color_colorlist', description: '区域颜色' },
            { code: 'line-linestyle-color_colorpicker', description: '折线颜色' },
            { code: 'line-areastyle-show_radio', description: '区域显示' },
            { code: 'line-smooth_radio', description: '折线是否平滑' },
            { code: 'line-showsymbol_radio', description: '折线点显示' },
            { code: 'line-symbol_select', description: '折线样式' },
            { code: 'line-symbolsize_slider', description: '折线点大小' },
            { code: 'line-linestyle-width_number', description: '折线宽度' },
            { code: 'series-smooth_radio', description: '平滑展示' },
            { code: 'line-smooth-monotone_select', description: '单调性' },
            { code: 'series-areastyle-show_radio', description: '阴影显示' },
            { code: 'series-areastyle-color_colorpicker', description: '面积颜色' },
            { code: 'line-areastyle-color-gradient-show_radio', description: '渐变开启' },
            { code: 'line-areastyle-color-gradient-show_radio', description: '面积颜色' },
            { code: 'line-areastyle-color-start_colorlist', description: '渐变起始颜色' },
            { code: 'line-areastyle-color-end_colorlist', description: '渐变结束颜色' },
            { code: 'line-endlabel-show_radio', description: '末端标签' },
            { code: 'line-endlabel-formatter_text', description: '标签格式' },
            { code: 'line-endlabel-distance_number', description: '标签距离' },
            { code: 'line-endlabel-color_colorpicker', description: '标签颜色' },
            { code: 'line-stack_text', description: '堆叠名称' },
            { code: 'line-step_select', description: '阶梯线类型' },
            { code: 'series-label-distance_number', description: '数值显示距离' },
            { code: 'series-label-fontstyle_select', description: '数值风格' },
            { code: 'series-label-formatter_text', description: '数值格式' },
            { code: 'series-labelline-show_radio', description: '标签线显示' },
            /*雷达图配置*/
            {code: 'radar-indicator_text', description: '指标项'},
            {code: 'radar-radius_slider', description: '半径'},
            {code: 'radar-splitline-show_radio', description: '分割线显示'},
            {code: 'radar-splitnumber_number', description: '分割段数'},
            {code: 'radar-splitline-linestyle-color_colorpicker', description: '分割线颜色'},
            {code: 'radar-splitline-linestyle-width_number', description: '分割线宽度'},
            {code: 'radar-splitline-linestyle-opacity_number', description: '分割线透明度'},
            {code: 'radar-shape_select', description: '形状'},
            {code: 'radar-axisline-linestyle-color_colorpicker', description: '坐标轴颜色'},
            {code: 'radar-axisline-linestyle-width_number', description: '坐标轴宽度'},
            {code: 'radar-axisline-linestyle-opacity_number', description: '坐标轴透明度'},



            { code: 'x-font-color', description: 'X轴字体颜色' },
            /* sgjc 添加*/
            { code: 'tuxing-size', description: '图形大小' },
            { code: 'tuxing-width-size', description: '图形宽度' },
            { code: 'tuxing-height-size', description: '图形高度' },
            { code: 'line-length', description: '线长度' },
            { code: 'line-width', description: '线宽度' },
            { code: 'color', description: '颜色' },
            { code: 'type', description: '类型' },
            { code: 'angel', description: '角度' },
            { code: 'fill-color', description: '填充颜色' },
            { code: 'tuxing-type', description: '图形类型' },
            { code: 'frequency', description: '频率' },
            { code: 'offsetx', description: 'x偏移' },
            { code: 'offsety', description: 'y偏移' },
            { code: 'duration', description: '周期' },
            { code: 'minsize', description: '最小大小' },
            { code: 'maxsize', description: '最大大小' },
            { code: 'color0', description: '0颜色' },
            { code: 'color1', description: '1颜色' },
            { code: 'backgroundcolor', description: '背景颜色' },
            { code: 'click-script', description: '点击执行函数' },
            { code: 'button-message', description: '按钮文字' },
            { code: 'c-1-color', description: '1颜色' },
            { code: 'c-2-color', description: '2颜色' },
            { code: 'c-3-color', description: '3颜色' },
            { code: 'c-4-color', description: '4颜色' },
            { code: 'btn-color', description: '按钮颜色' },
            { code: 'time-font-color', description: '时间字体颜色' },
            { code: 'date-font-color', description: '日期字体颜色' },
            { code: 'message', description: '文字' },
            { code: 'font-size', description: '字体大小' },
            { code: 'font-weight', description: '字体类型' },
            { code: 'font-color', description: '字体颜色' },
            { code: 'src', description: '来源' },
            { code: 'alt', description: '替代' },
            { code: 'image-radius', description: '角半径' },
            { code: 'glow-color', description: '发光颜色' },
            { code: 'glow-spread-color', description: '发光扩散颜色' },
            { code: 'start-color', description: '开始颜色' },
            { code: 'middle-color', description: '中间颜色' },
            { code: 'end-color', description: '结束颜色' },
            { code: 'end-color0', description: '结束颜色0' },
            { code: 'end-color1', description: '结束颜色1' },
            { code: 'end-color2', description: '结束颜色2' },
            { code: 'border-color', description: '边颜色' },
            { code: 'line-color', description: '线颜色' },
            { code: 'shan-color', description: '扇面颜色' },
            { code: 'card-start-color', description: '卡片开始颜色' },
            { code: 'card-end-color', description: '扇面颜色' },
            { code: 'moon-start-color', description: '月亮开始颜色' },
            { code: 'moon-end-color', description: '月亮结束颜色' },
            { code: 'shan-color', description: '扇面颜色' },
            { code: 'direction', description: '方向' },
            { code: 'speed', description: '速度' },
            { code: 'align', description: '停靠' },
            { code: 'border-radius', description: '角弧半径' },
            { code: 'bg01-color', description: '背景01颜色' },
            { code: 'bg02-color', description: '背景02颜色' },
            { code: 'bg03-color', description: '背景03颜色' },
            { code: 'button-color', description: '按钮颜色' },
            { code: 'button-height', description: '按钮高' },
            { code: 'button-width', description: '按钮宽' },
            { code: 'button-class', description: '按钮样式' },
            { code: 'hover-color', description: 'hover颜色' },
            { code: 'button-start-color', description: '按钮渐变开始颜色' },
            { code: 'button-mid-color', description: '按钮渐变中间颜色' },
            { code: 'button-end-color', description: '按钮渐变结束颜色' },
            { code: 'hover-start-color', description: 'hover渐变开始颜色' },
            { code: 'hover-end-color', description: 'hover渐变结束颜色' },
            { code: 'pulse-color', description: '跳动颜色' },
            { code: 'blink-color', description: '闪动颜色' },
            { code: 'prompt-message', description: '非点击提示词' },
            { code: 'doit-message', description: '执行提示词' },
            { code: 'element-height', description: '元素高' },
            { code: 'element-width', description: '元素宽' },
            { code: 'element-speed', description: '元素速度' },
            { code: 'element-direct', description: '元素运动方向' },
            { code: 'icon-color', description: '图标颜色' },
            { code: 'icon-hover-color', description: '图标Hover颜色' },
            { code: 'element-color', description: '元素颜色' },
            { code: 'bg-end-color', description: '背景渐变结束颜色' },
            { code: 'pad-size', description: '元素间隔大小' },
            { code: 'main-message', description: '主信息' },
            { code: 'auto-play', description: '自动播放' },
            { code: 'timer-interval', description: '定时器间隔（秒）' },


        ];
        // 方法：通过代码获取中文描述
        function getDescriptionByCode(code) {
            const entry = codeDescriptionMap.find(item => item.code === code);
            return entry ? entry.description : code;
        }
    </script>
</head>
<body>

<table class="QrCSSDesignerPad">
    <tr class="fixed-header">
        <td></td>
        <td class="QrCSSDesignerPadLeft">编辑对象:</td>
        <td style="width: 350px">
            <input type="text" id="cssTagname"   placeholder="css element tag or id" style="width: 100%">
            <button id="getElementattr">获取属性</button>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <div class="attribute-list" id="attributeList">
                <!-- Attributes will be displayed here -->
                点击获取属性，然后可以在此编辑属性
            </div>
        </td>

    </tr>
</table>

<script>
    function isEmptyObject(obj) {
        return Object.keys(obj).length === 0;
    }
    const attributeList = document.getElementById('attributeList');
    const html_channel = new BroadcastChannel('html_channel');

    function updateAttributeValue(tagname,keyInput, valueInput) {

        if (tagname){
            const oldvalue = valueInput.getAttribute('data-old-value');
            // 记录一下历史数据
            valueInput.setAttribute('data-old-value',valueInput.value);
            var msg = {"attr1":'setattr','attr2':tagname,'attr_name':keyInput.id,'attr_old_value':oldvalue,'attr_new_value':valueInput.value};
            console.log("attr发送消息变动" + JSON.stringify(msg));
            channel_html_sendMessage(msg);

        }

    }
    function updateColorlistValue(valueInput, color_list){
        if (valueInput.value.trim() == "")
        {
            valueInput.value = color_list.value
        }
        else{
            valueInput.value = valueInput.value + "," +color_list.value
        }
        // 创建一个新的change事件
        var event = new Event('change');

        // 触发change事件
        valueInput.dispatchEvent(event);

    }

    // 重构后的属性编辑器逻辑
    html_channel.onmessage = function(event) {
        // 处理消息
        const { design_set, attr1, attr2: json_data } = event.data;
        // 获取标签名
        const messagesInput = document.getElementById('cssTagname');
        // 更新标签名
        messagesInput.value = attr1;

        if (design_set === 1) {
            if (attr1 == ""){
                attributeList.innerHTML = '';
            }else{
                messagesInput.dispatchEvent(new Event('change'));
            }
            return;
        }

        if (!json_data || typeof json_data !== 'object') return;
        attributeList.innerHTML = '';

        // 创建分组容器
        const groups = {
            base: { name: "基础设置", items: [] },
            series: { name: "数值设置", items: [] },
            lineSeries: { name: "折线设置", items: [] },
            pieSeries: { name: "饼图设置", items: [] },
            radarSeries: { name: "雷达图设置", items: [] },
            grid: { name: "边距设置", items: [] },
            title: { name: "标题设置", items: [] },
            xaxis: { name: "X轴设置", items: [] },
            yaxis: { name: "Y轴设置", items: [] },
            legend: { name: "图例设置", items: [] },
            tooltip: { name: "提示语设置", items: [] },
        };

        // 将属性分组
        Object.entries(json_data).forEach(([key, value]) => {
            // 创建属性项
            const item = createAttributeItem(attr1, key, value);
            // 检查属性项是否创建成功
            if (!item) return;

            // 将属性项添加到对应的分组
            if (key.toLowerCase().startsWith('title')) {
                groups.title.items.push({key, value, element: item});
            } else if (key.toLowerCase().startsWith('xaxis') ) {
                groups.xaxis.items.push({key, value, element: item});
            } else if (key.toLowerCase().startsWith('yaxis')) {
                groups.yaxis.items.push({key, value, element: item});
            }else if (key.toLowerCase().startsWith('legend')) {
                groups.legend.items.push({key, value, element: item});
            }else if (key.toLowerCase().startsWith('series')) {
                groups.series.items.push({key, value, element: item});
            }else if (key.toLowerCase().startsWith('grid')) {
                groups.grid.items.push({key, value, element: item});
            }else if (key.toLowerCase().startsWith('pie')) {
                groups.pieSeries.items.push({key, value, element: item});
            } else if (key.toLowerCase().startsWith('tooltip')) {
                groups.tooltip.items.push({key, value, element: item});
            } else if (key.toLowerCase().startsWith('radar')) {
                groups.radarSeries.items.push({key, value, element: item});
            } else if (key.toLowerCase().startsWith('line')) {
                groups.lineSeries.items.push({key, value, element: item});
            } else {
                groups.base.items.push({key, value, element: item});
            }
        });

        // 创建分组DOM并添加到容器
        const fragment = document.createDocumentFragment();

        // 获取所有非空分组
        const nonEmptyGroups = [groups.base,groups.pieSeries,groups.radarSeries,groups.lineSeries,groups.grid,groups.title, groups.xaxis, groups.yaxis, groups.series, groups.legend,   groups.tooltip,  ].filter(group => group.items.length > 0);

        // 遍历并创建分组元素
        nonEmptyGroups.forEach((group, index) => {
            const isOnlyGroup = nonEmptyGroups.length === 1;
            const groupElement = createGroupElement(group.name, group.items, isOnlyGroup);
            fragment.appendChild(groupElement);
        });

        attributeList.appendChild(fragment);
    };

    // 创建分组元素
    function createGroupElement(groupName, items, expanded = false) {
        const groupDiv = document.createElement('div');
        groupDiv.className = 'attribute-group';

        // 创建分组标题（可点击折叠）
        const header = document.createElement('div');
        header.className = 'group-header';

        const nameSpan = document.createElement('span');
        nameSpan.className = 'group-name';
        nameSpan.textContent = groupName;

        const toggleSpan = document.createElement('span');
        toggleSpan.className = 'group-toggle';
        toggleSpan.textContent = expanded ? '▲' : '▼';

        const countSpan = document.createElement('span');
        countSpan.className = 'item-count';
        countSpan.textContent = `(${items.length}项)`;

        header.appendChild(nameSpan);
        header.appendChild(toggleSpan);
        header.appendChild(countSpan);

        // 创建内容容器（默认折叠）
        const content = document.createElement('div');
        content.className = 'group-content';
        content.style.display = expanded ? 'block' : 'none';

        // 添加项目到内容容器
        items.forEach(item => {
            content.appendChild(item.element);
        });

        // 添加点击事件切换折叠状态
        header.addEventListener('click', () => {
            const isCollapsed = content.style.display === 'none';
            content.style.display = isCollapsed ? 'block' : 'none';
            header.querySelector('.group-toggle').textContent = isCollapsed ? '▲' : '▼';
        });

        groupDiv.appendChild(header);
        groupDiv.appendChild(content);

        return groupDiv;
    }

    function createColorListControl(tag, key, value) {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'flex';

        const textInput = createTextControl(tag, key, value);
        const colorInput = document.createElement('input');
        colorInput.type = 'color';
        colorInput.onchange = () => updateColorlistValue(textInput, colorInput);

        colorInput.setAttribute('data-old-value', value);
        wrapper.appendChild(textInput);
        wrapper.appendChild(colorInput);
        return wrapper;
    }
    function createAttributeItem(tagname, key, value) {
        const div = document.createElement('div');
        div.className = 'attribute-item';
        div.style.display = 'flex';

        const label = createKeyInput(key);
        let control;

        if (key.includes('_array')) {
            control = createArrayTableControl(tagname, key, value);
        }  else if (key.includes('_colorpicker')) {
            control = createColorControl(tagname, key, value);
        }  else if (key.includes('_colorlist')) {
            control = createColorListControl(tagname, key, value);
        } else if (key.includes('_script')) {
            control = createTextareaControl(tagname, key, value);
        } else if (key.includes('_timer')) {
            control = createTextControl(tagname, key, value);
        }else if (key.includes('_number')) {
            control = createSliderControl(tagname, key, value);
        } else if (key.includes('_radio')) {
            control = createRadioControl(tagname, key, value, [
                { label: '是', value: 'true' },
                { label: '否', value: 'false' }
            ]);
        } else if (key.includes('fontweight_select')) {
            control = createSelectControl(tagname, key, value, [
                { label: '正常', value: 'normal' },
                { label: '粗体', value: 'bold' },
                { label: '特粗体', value: 'bolder' },
                { label: '细体', value: 'lighter' }
            ]);
        } else if (key.includes('textalign_select')) {
            control = createSelectControl(tagname, key, value, [
                { label: '居中', value: 'center' },
                { label: '左对齐', value: 'left' },
                { label: '右对齐', value: 'right' }
            ]);
        } else if (key.includes('_slider')) {
            control = createSliderControl(tagname, key, value);
        } else if (key.includes('fontstyle_select')) {
            control = createRadioControl(tagname, key, value, [
                { label: '正常', value: 'normal' },
                { label: '斜体', value: 'italic' }
            ]);
        }else if (key.includes('switch')) {
            control = createSwitchControl(tagname, key, value);
        }else if(key.includes('line-symbol_select')){
            control = createSelectControl(tagname, key, value, [
                { label: '圆形', value: 'circle' },
                { label: '矩形', value: 'rect' },
                { label: '圆角矩形', value: 'roundRect' },
                { label: '三角形', value: 'triangle' },
                { label: '图钉形', value: 'pin' },
                { label: '箭头形', value: 'arrow' },
                { label: '不显示', value: 'none' },
            ]);
        } else {
            control = createTextControl(tagname, key, value);
        }

        div.appendChild(label);
        div.appendChild(control);
        return div;
    }
    function createSwitchControl(tagname, key, value) {
        const container = document.createElement('label');
        container.className = 'switch-control';

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = (value === true || value === 'true');

        const slider = document.createElement('span');
        slider.className = 'slider';

        // 绑定事件：改变时修改组件属性
        checkbox.addEventListener('change', () => {
            const el = document.querySelector(tagname);
            if (el) {
                el.setAttribute(key, checkbox.checked);
            }
        });

        container.appendChild(checkbox);
        container.appendChild(slider);

        return container;
    }


    function createKeyInput(key) {
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'attribute-key';
        input.readOnly = true;
        input.id = key;
        input.value = getDescriptionByCode(key);
        input.style.width = '40%';
        return input;
    }

    function createTextControl(tag, key, value) {
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'attribute-value';
        input.value = value;
        input.setAttribute('data-old-value', value);
        input.onchange = () => updateAttributeValue(tag, { id: key }, input);
        return input;
    }

    function createTextareaControl(tag, key, value) {
        const textarea = document.createElement('textarea');
        textarea.className = 'attribute-value';
        textarea.value = value;
        textarea.setAttribute('data-old-value', value);
        textarea.onchange = () => updateAttributeValue(tag, { id: key }, textarea);
        return textarea;
    }
    function createNumberControl(tag, key, value) {
        const input = document.createElement('input');
        input.type = 'number';
        input.className = 'attribute-value';
        input.value = value;
        input.setAttribute('data-old-value', value);

        input.onchange = () => {
            updateAttributeValue(tag, { id: key }, input);
        };
        return input;
    }


    function createColorControl(tag, key, value) {
        const input = document.createElement('input');
        input.type = 'color';
        input.className = 'attribute-value';
        input.value = value;
        input.setAttribute('data-old-value', value);
        input.onchange = () => updateAttributeValue(tag, { id: key }, input);
        return input;
    }

    function createArrayTableControl(tag, key, value) {
        // 1) 解析初始值为数组
        let arr = [];
        if (Array.isArray(value)) {
            arr = value.slice();
        } else if (typeof value === 'string') {
            const s = value.trim();
            if (s.startsWith('[') && s.endsWith(']')) {
                try { arr = JSON.parse(s); } catch (e) { arr = []; }
            } else if (s) {
                arr = s.split(',').map(v => v.trim());
            }
        }

        // 2) 容器 & 隐藏输入（保持与 updateAttributeValue 的契约一致）
        const wrapper = document.createElement('div');
        wrapper.className = 'attribute-value';

        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.value = JSON.stringify(arr);
        hiddenInput.setAttribute('data-old-value', hiddenInput.value);
        // 仿照你的其它控件，不需要设置 id；真正的 key 通过第二个参数 { id:key } 传入
        wrapper.appendChild(hiddenInput);

        // 3) 表格
        const table = document.createElement('table');
        table.style.borderCollapse = 'collapse';
        table.style.width = '100%';
        table.style.fontSize = '12px';

        const thead = document.createElement('thead');
        const headRow = document.createElement('tr');
        ['值', '操作'].forEach(text => {
            const th = document.createElement('th');
            th.innerText = text;
            th.style.border = '1px solid #ccc';
            th.style.padding = '4px';
            headRow.appendChild(th);
        });
        thead.appendChild(headRow);

        const tbody = document.createElement('tbody');

        // 4) 通知变更：用隐藏 input 触发你现有的 updateAttributeValue
        function notifyChange() {
            const newStr = arr.join(',');
            hiddenInput.value = newStr;
            updateAttributeValue(tag, { id: key }, hiddenInput);
            // 同步 old-value，避免你方法里取 old 值为上一次
            hiddenInput.setAttribute('data-old-value', newStr);
        }

        function renderRows() {
            tbody.innerHTML = '';
            arr.forEach((item, idx) => {
                const tr = document.createElement('tr');

                // 值单元
                const tdValue = document.createElement('td');
                tdValue.style.border = '1px solid #ccc';
                tdValue.style.padding = '4px';
                const input = document.createElement('input');
                input.type = 'text';
                input.value = item;
                input.style.width = '100%';
                input.onchange = () => {
                    arr[idx] = input.value;
                    notifyChange();
                };
                tdValue.appendChild(input);
                tr.appendChild(tdValue);

                // 操作单元（删除小图标）
                const tdAction = document.createElement('td');
                tdAction.style.border = '1px solid #ccc';
                tdAction.style.padding = '4px';
                tdAction.style.textAlign = 'center';

                const delBtn = document.createElement('button');
                delBtn.title = '删除';
                delBtn.style.border = 'none';
                delBtn.style.background = 'transparent';
                delBtn.style.cursor = 'pointer';
                delBtn.style.padding = '0';
                delBtn.style.margin = '0 auto';
                delBtn.style.display = 'inline-flex';
                delBtn.style.alignItems = 'center';
                delBtn.style.justifyContent = 'center';
                delBtn.style.width = '18px';
                delBtn.style.height = '18px';
                delBtn.innerHTML = `
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            `;
                delBtn.onclick = () => {
                    arr.splice(idx, 1);
                    renderRows();
                    notifyChange();
                };
                tdAction.appendChild(delBtn);
                tr.appendChild(tdAction);

                tbody.appendChild(tr);
            });
        }

        table.appendChild(thead);
        table.appendChild(tbody);
        wrapper.appendChild(table);

        // 添加一行按钮
        const addBtn = document.createElement('button');
        addBtn.innerText = '添加一行';
        addBtn.style.marginTop = '8px';
        addBtn.onclick = () => {
            arr.push('');
            renderRows();
            notifyChange();
        };
        wrapper.appendChild(addBtn);

        renderRows();

        return wrapper;
    }





    function createColorListControl(tag, key, value) {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'flex';

        const textInput = createTextControl(tag, key, value);
        const colorInput = document.createElement('input');
        colorInput.type = 'color';
        colorInput.onchange = () => updateColorlistValue(textInput, colorInput);
        colorInput.setAttribute('data-old-value', value);
        wrapper.appendChild(textInput);
        wrapper.appendChild(colorInput);
        return wrapper;
    }

    function createSelectControl(tag, key, value, options) {
        const select = document.createElement('select');
        select.className = 'attribute-value';
        options.forEach(opt => {
            const option = document.createElement('option');
            option.value = opt.value;
            option.textContent = opt.label;
            if (value === opt.value) option.selected = true;
            select.appendChild(option);
        });
        select.onchange = () => updateAttributeValue(tag, { id: key }, select);
        select.setAttribute('data-old-value', value);
        return select;
    }

    // 1. 创建单选控件时，将旧值存储在父容器div上（统一管理）
    function createRadioControl(tag, key, value, options) {
        const div = document.createElement('div');
        div.className = 'attribute-value';

        // 存储当前选中值（用于同步旧值）
        let currentValue = value;

        // 创建所有单选按钮
        const radios = options.map(opt => {
            const label = document.createElement('label');
            label.style.marginRight = '10px';

            const radio = document.createElement('input');
            radio.type = 'radio';
            radio.name = key;
            radio.value = opt.value;
            radio.checked = String(value) === opt.value;
            // 初始化每个radio的旧值为初始值
            radio.setAttribute('data-old-value', value);

            label.appendChild(radio);
            label.appendChild(document.createTextNode(opt.label));
            div.appendChild(label);
            return radio;
        });
        // 给每个单选按钮绑定点击事件（核心修复逻辑）
        radios.forEach(radio => {
            radio.onchange = () => {
                // 1. 点击时，当前选中值是即将被替换的"旧值"
                const oldValue = currentValue;

                // 2. 同步更新所有同组单选按钮的data-old-value为旧值
                radios.forEach(r => r.setAttribute('data-old-value', oldValue));

                // 3. 更新当前选中值为新值
                currentValue = radio.value;

                // 4. 触发updateAttributeValue（此时radio的data-old-value已同步为oldValue）
                updateAttributeValue(tag, { id: key }, radio);
            };
        });

        return div;
    }

    function createSliderControl(tag, key, value) {
        const input = document.createElement('input');
        input.type = 'number';
        input.className = 'attribute-value';
        input.step = key.includes('alpha') ? 0.1 : 1;
        input.min = 0;
        input.max = key.includes('alpha') ? 1 : 100;
        //如果value包含不是数字的，则去掉，只显示数组
        value = value.replace(/[^0-9.]/g, '');
        input.value = value;
        input.onchange = () => updateAttributeValue(tag, { id: key }, input);
        return input;
    }

    function channel_html_sendMessage(message) {
        if (message) {
            html_channel.postMessage(message);
        }
    }

</script>
<script>
    // 获取按钮元素
    const getElementattr = document.getElementById('getElementattr');
    // 添加点击事件监听器
    getElementattr.addEventListener('click', function() {
        //向designer发送获取想要的元素的css
        var msg = {"attr1":'getattrs','attr2':document.getElementById('cssTagname').value};
        channel_html_sendMessage(msg);
    });
    const elchange =  document.getElementById('cssTagname');
    elchange.addEventListener('change', function() {
        //向designer发送获取想要的元素的css
        var msg = {"attr1":'getattrs','attr2':document.getElementById('cssTagname').value};
        channel_html_sendMessage(msg);
    });


</script>
</body>
</html>

<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
